<template>
    <div class='container'>

        <t-tabs :default-value="1" class="tabs">
            <t-tab-panel :value="1" label="AI大模型" class="tab-panel">
                <div class="grid">
                    <div class="item box">

                        <t-badge :count="1">
                            <div class="menu">选项卡1内容区</div>
                        </t-badge>
                    </div>
                    <div class="item" v-for="value in 30">
                        <t-badge :count="value + 1">

                            <div class="menu">标题一般有{{ value + 1 }}</div>

                        </t-badge>
                    </div>
                </div>
            </t-tab-panel>
            <t-tab-panel :value="2" label="AI论文">
                <p style="margin: 20px">选项卡2内容区</p>
            </t-tab-panel>
            <t-tab-panel :value="3" label="研发">
                <p style="margin: 20px">选项卡3内容区</p>
            </t-tab-panel>
        </t-tabs>

    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
</script>
<style lang='scss' scoped>
.tabs {
    margin-bottom: 20px;
    border-radius: 5px;

    .tab-panel {
        padding: 20px;

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            gap: 30px;

            .item {

                background-color: #5D3DF6;
                justify-content: center;
                align-items: center;
                display: flex;
                border-radius: 5px;
                padding: 10px;

                .menu {
                    font-size: 20px;
                }
            }

            .box {
                grid-row: 1/3;
                grid-column: 1/3;
            }
        }
    }
}
</style>